<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			html,
			body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			.wrap{
				position: relative;
				width: 300px;
				height: 300px;
				border: 1px solid;
				margin: 200px auto;
			}
			.test{
				position: absolute;
				left: 50%;
				top: 50%;
				/* transform: translate3d(-50%, -50%, 0); */
				margin-left: -50px;
				margin-top: -50px;
				width: 100px;
				height: 100px;
				background-color: pink;
				text-align: center;
				font: 20px/ 100px "微软雅黑";
				border-radius: 50%;
				
				/* 动画内的属性 */
				animation-name: move;
				animation-duration: 2s;
				animation-timing-function: linear;
				/* 重复的是关键帧，反转的也是关键帧 和 animation-timing-function */
				animation-direction: alternate;
				/* 动画外的属性 */
				animation-delay: 1s;
				/* 只作用于动画内的属性 */
				/* 这个重复是重复的关键帧 */
				animation-iteration-count: 3;
				
				/*
					元素在动画外的状态
					backwards：from 之前的状态与 from 的状态保持一致
					forwards：to 之后的状态与 to 的状态保持一致
					both：backwards + forwards
				*/
				animation-fill-mode: both;
				/* animation-play-state 默认值为 running */
				animation-play-state: running;
			}
			@keyframes move{
				from {
					transform: translateY(-100px);
				}
				to {
					transform: translateY(100px);
				}
			}
			.wrap:hover .test{
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="test">
				测试文本
			</div>
		</div>
	</body>
</html>
